<template>
  <div class="personalInfo"
       chat-infobox="666"
  >
    <div v-if="user_info" class="info clearfix">
      <div class="nameAndPhone fl">
        <input type="text" placeholder="请输入" v-model="user_name" @blur="changeName">
        <img src="@/assets/message/editRemark.png" alt="">
        <p>{{ user_info.user_phone }}</p>
      </div>
      <div class="changeAvatar fr">
        <avatar :personalInfo="'myself'" :imgID="$store.state.user.userInfo.user_img"
                :id="$store.state.user.userInfo.user_id"></avatar>
        <p class="text cp" @click="changeAvatar">更换头像</p>
      </div>
    </div>
    <div class="resetPassword flex-between cp" @click="resetPassword">
      <span class="flex-start text">修改密码</span>
      <img src="@/assets/message/rightArrow.png" class="flex-start arrow" alt="" ondragstart="return false">
    </div>
    <div class="myInvitationCode flex-between cp" @click="showMyInvitationCode">
      <span class="flex-start text">我的邀请码</span>
      <img src="@/assets/message/rightArrow.png" class="flex-start arrow" alt="" ondragstart="return false">
    </div>
    <div class="logout btn-red-2" @click="showLogout">退出登录</div>
  </div>
</template>

<script>
export default {
  name: 'personalInfo',
  data () {
    return {
      user_name: ''
    }
  },
  computed: {
    user_info () {
      return this.$store.state.chatInformation.userList[this.tools.getUserId()]
    }
  },
  watch: {
    user_info: {
      deep: true,
      immediate: true,
      handler (val) {
        if (val && val.user_name) {
          this.user_name = val.user_name
        }
      }
    }
  },
  methods: {
    // 更换姓名
    changeName () {
      this.$store.dispatch('user/updateUser', {
        name: this.user_name
      })
    },
    // 更换头像
    changeAvatar () {
      this.tools.createInputFile(false, 'image/*', false).then(res => {
        if (res.data && res.data.code === 200 && res.data.data) {
          this.$store.dispatch('user/updateUser', {
            img: res.data.data[0].file_id
          })
        }
      })
    },
    // 点击修改密码
    resetPassword () {
      this.tools.storage.setBackPage(this.$route.path)
      this.$router.push('/resetPassword')
    },
    // 点击我的邀请码
    showMyInvitationCode () {
      this.$emit('showInvitationCode')
    },
    // 点击退出登录
    showLogout () {
      this.$emit('showLogout')
    }
  }
}
</script>

<style scoped lang="scss">
.personalInfo {
  width: 300px;
  height: 480px;
  border-radius: 4px;
  box-shadow: 0px 4px 24px 0px #d8dee9;
  position: absolute;
  left: 87px;
  top: 72px;
  background-color: #fff;
  z-index: 1;

  .info {
    height: 96px;
    border-bottom: 1px solid #EBEDF3;
    padding: 24px 20px;

    .nameAndPhone {
      p {
        color: #5F7196;
        font-size: 14px;
      }
      input {
        vertical-align: middle;
        border: none;
        color: #0D172C;
        width: 64px;
      }
      img {
        width: 16px;
        height: 16px;
        vertical-align: middle;
      }
    }

    .changeAvatar {
      width: 48px;
      height: 48px;
      position: relative;

      .text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0.1);
        color: #fff;
        font-size: 100px;
        width: 480px;
        height: 480px;
        line-height: 480px;
        text-align: center;
        background-color: rgba(0, 0, 0, 0.5);
      }
    }
  }

  .resetPassword, .myInvitationCode {
    height: 52px;
    padding: 0 20px;
    border-bottom: 1px solid #EBEDF3;

    .text {
      font-size: 14px;
      color: #2E3F64;
    }

    img {
      width: 18px;
      height: 18px;
      transform: rotateZ(-90deg);
    }
  }

  .logout {
    width: 260px;
    margin: 218px auto 0;
  }
}
</style>
